<script setup>
const emit = defineEmits(['btn-click']);

const props = defineProps({
    title: {
        type: String,
        value: ''
    },
    infoText: {
        type: String,
        default: ''
    },
    iconName: {
        type: String,
        default: 'info'
    },
    iconSize: {
        type: String,
        default: '64'
    },
    iconColor: {
        type: String,
        default: '#007AFF'
    },
    btnName: {
        type: String,
        default: ''
    },
    btnType: {
        type: String,
        default: ''
    },
    paddingTop: {
        type: Number,
        default: 100
    }
});

const onBtnClick = () => {
    emit('btn-click');
};
</script>

<template>
    <div class="c-result">
        <div class="content-box" :style="`padding-top: ${props.paddingTop}px`">
            <c-icon
                :style="`height: ${props.iconSize}px;line-height: ${props.iconSize}px`"
                :name="props.iconName"
                :color="props.iconColor"
                :size="props.iconSize"
            ></c-icon>
            <div class="title">{{ props.title }}</div>
            <div class="info">{{ props.infoText }}</div>
        </div>
        <van-button
            :class="`btn btn-${props.btnType}`"
            v-if="props.btnName"
            plain
            @click="onBtnClick"
        >
            {{ props.btnName }}
        </van-button>
    </div>
</template>

<style lang="less">
@import '../../styles/variables.less';

.c-result {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: @white;

    .content-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 100px 50px 60px;

        .title {
            margin: 16px 0 8px;
            font-size: 20px;
            line-height: 28px;
            font-weight: 500;
            color: @label-color;
        }
        .info {
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            color: @content-color;
        }
    }
    .btn {
        font-size: 17px;
        font-weight: 500;
        width: 184px;
        height: 40px;
        line-height: 40px;
        border-radius: 8px;
        background-color: @tag-active;
        border: none;
        color: @blue;
    }

    .btn-primary {
        background-color: @blue;
        color: @white;
    }
}
</style>
